/**
 * Author Biography
 */
.nv-author-biography {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0 0 20px;

  .nv-author-bio-text-wrapper {
    padding-left: 20px;
  }
}

@media(max-width: 576px) {
  .nv-author-biography {
    flex-direction: column;

    .nv-author-bio-image {
      width: 100px;
      height: 100px;
    }

    .nv-author-bio-text-wrapper {
      padding-left: 0;
      padding-top: 20px;
    }
  }
}

/**
 * Related Posts
 */
.nv-related-posts {
  .posts-wrapper {
    margin: 0 -15px;
    display: flex;

    .related-post {

      margin-bottom: 30px;

      .content {
        padding-bottom: 30px;
        border-bottom: 1px solid #f0f0f0;
      }
    }
  }
}

/**
 * Social icons
 */

.nv-social-icon {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin-right: 8px;
  cursor: pointer;

  a, &.social-share {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 30px;
    width: 30px;
    height: 30px;
    background-color: #676767;
    border-radius: 50%;

    svg {
      fill: #fff;
    }
  }

  &:not(:first-child) {
    opacity: 0;
    transform: translateX(20%);
    transition: transform 400ms ease-out, opacity 400ms ease-out;
  }

  /* Social icons color */
  a.facebook {
    background-color: #3b5998;
  }

  a.twitter {
    background-color: #1da1f2;
  }

  a.pinterest {
    background-color: #bd081c;
  }

  a.linkedin {
    background-color: #0077b5;
  }

  a.tumblr {
    background-color: #35465c;
  }

  a.reddit {
    background-color: #ff4500;
  }

  a.email {
    background-color: #58a9de;
  }

  a.whatsapp, a.sms {
    background-color: #20b038;
  }

  a.vk {
    background-color: #45668e;
  }
}

.nv-post-share {
  margin: 10px 0;

  ul {
    display: flex;
  }

  &:hover {
    .nv-social-icon {
      &:not(:first-child) {
        opacity: 1;
        transform: translateX(0%);
      }
    }
  }
}

#toggle-comment-area {
  margin: 40px auto 20px;
  display: block;
}

.nv-comments-hidden {
  display: none;
}

.nv-social-icon.hide-mobile {
  display: none;
}

@media (min-width: 960px) {
  .nv-social-icon.hide-desktop {
    display: none;
  }

  .nv-social-icon.hide-mobile:not(.hide-desktop) {
    display: flex;
  }
}
